<script setup>
import {ref} from "vue";

const showSelectBox = ref(true);
const showSelectUse = ref(false);
const showSelectReservation = ref(false);
const type = ref("");


const resourceType = [
  {
    value: 'Option1',
    label: 'Option1',
  },
  {
    value: 'Option2',
    label: 'Option2',
  }
]
</script>

<template>
  <div class="select" v-show="showSelectBox">
    <div class="select-box" style="background-color: rgba(238,190,119,0.56)" @click="showSelectBox = false;showSelectUse = true">
      <span>使用</span>
    </div>
    <div class="select-box" style="background-color: rgba(250,182,182,0.83)" @click="showSelectBox = false;showSelectReservation = true">
      <span>预定</span>
    </div>
  </div>
  <div class="use-page" v-if="showSelectUse">
    <el-select
        v-model="type"
        placeholder="资源类型"
        style="width: 240px"
    >
      <el-option
          v-for="item in options"
          :key="item.value"
          :label="item.label"
          :value="item.value"
      />
    </el-select>
  </div>
</template>

<style scoped>
.select{
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  align-content: center;
  height: 100vh;
}

.select-box{
  border: black solid 1px;
  border-radius: 45px;
  width: 300px;
  height: 300px;
  margin: 60px;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  align-content: center;
  font-size: 24px;
  font-family: 华文琥珀 楷体;
}
</style>